Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會利用目前 Visual Studio 內建的專案樣本建立一個初始的 .NET MAUI 專案，並且透過此 .NET MAUI 專案來把 TopStore App 的開發從 Xamairn.Forms 轉換到 .NET MAUI 上進行。

本篇是 Re: 從零改成用 .NET MAUI 技術來繼續過去用 Xamarin 開發的一個 App : TopStore 系列 系列文的 EP22。

在前一回當中已經確認到在 GoodsPage 的 BindingContext 當中會有 GoodsPageViewModel 所產生的資料物件，也能運用 App.DataService.GetGoods() 來取得 MockData 所產生的多個 Product 記錄在 goods 的部分，並能設定到其 GoodsPageViewModel 所設計的 Goods 屬性。

那接著就可以來調整呈現畫面的部分了。

找到 Pages 資料夾底下的 GoodsPage.xaml 並開啟：

開啟後，把原本存在此 XAML 檔案上 StackLayout 標記內部的 XAML 標記碼通通刪除：

刪除完畢後，準備到 ContentPage 標記當中，來增加要引入的命名空間，並且定義其型別。

把 ContentPage 的標記跟上方的命名空間隔出空行：

在打要引入的命名空間時，現在 Visual Studio 都會有相關的 "提醒"，可以更方便的選到正確要引入的對象：

完成的標記如下：

    xmlns:viewmodels="clr-namespace:TopStoreApp.ViewModels"

接著繼續定義繫結對象的型別：

完成的標記如下：

    x:DataType="viewmodels:GoodsPageViewModel"

再來到 StackLayout 的標記當中宣告要使用 CollectionView 這個集合項目的 UI 控制項，完成的標記如下：

<CollectionView ItemSizingStrategy="MeasureFirstItem" >
</CollectionView>

設定其 ItemSource 的資料是繫結到 viewmodels:Goods，在這邊會注意到可以直接選擇先前 GoodsPageViewModel 裡所定義的 Goods 屬性(因為前面有先定義 "繫結對象的型別")：

完成的標記如下：

ItemsSource="{Binding Goods}"

存檔後會 XAML 標記會自動簡化並排版如下(因為有安裝 XAML Styler 延伸模組 就會作這樣的協助)：

執行到看看，切換到 "物品項" 這個分頁時會看到如下的結果：

接下來就是要繼續調整 CollectionView 內部每個項目該如何呈現資料的樣子了，就下一回再繼續囉！

本 EP 介紹所完成的範例程式碼可在此下載。